<template>
  <Transition name="slide-left">
    <div v-if="showSetting" class="setting flex flex-col h-100">
      <Toolbar></Toolbar>
      <div class="personality-head flex align-center">
        <img :src="backPng" width="16" @click="gobackSetting" />
      </div>

      <div class="card px-16">
        <div class="px-16 py-12 text-18 text-center title text-shadow">
          添加消息列表
        </div>
        <form ref="formRef" class="flex flex-col h-100 mt-12" @submit="submit">
          <!--  -->
          <div class="px-16 flex flex-col">
            <hr class="mt-12 w-100 mb-10" />

            <div class="flex form-item">
              <div class="flex flex-s">
                <label for="user-name">姓名</label>
              </div>

              <div class="input flex-1">
                <input
                  id="user-name"
                  v-model="form.title"
                  required
                  type="text"
                  placeholder="请输入姓名"
                />
              </div>
            </div>
            <div class="flex form-item">
              <div class="flex flex-s">
                <label for="user-name">类型</label>
              </div>

              <div class="input flex-1 text-right">
                <select>
                  <option
                    v-for="(item, key) in typeList"
                    :key="key"
                    :value="item.value"
                    >{{ item.title }}
                  </option>
                </select>
              </div>
              <div class="arrow flex align-center">
                <img :src="arrowRight" width="14" />
              </div>
            </div>

            <!--  -->
            <div class="flex form-item">
              <div class="flex flex-s">
                <label for="lastMessage">预览消息</label>
              </div>

              <div class="input flex-1">
                <input
                  id="lastMessage"
                  v-model="form.lastMessage"
                  maxlength="20"
                  required
                  type="text"
                  placeholder="显示最后的聊天消息"
                />
              </div>
            </div>
            <!--  -->
            <div class="flex form-item">
              <div class="flex flex-s">
                <label for="time">时间</label>
              </div>

              <div class="input flex-1">
                <input
                  id="time"
                  v-model="form.time"
                  required
                  type="text"
                  placeholder="12:20"
                  :maxlength="5"
                />
              </div>
            </div>

            <!--  -->
            <div class="flex form-item">
              <div class="flex flex-s">
                <label for="avatar">头像</label>
              </div>
              <div class="input flex-1 flex justify-right gc-4">
                <img
                  v-if="form.avatar"
                  :src="form.avatar"
                  required
                  width="24"
                />
                <!-- <select v-model="form.avatar">
                <option value="1">随机</option>
                <option value="2">本地上传</option>
              </select> -->
                <span>随机</span>
                <input v-model="random" disabled type="checkbox" />
              </div>

              <!-- <div class="arrow flex align-center">
              <img :src="arrowRight" width="14"  />
            </div> -->
            </div>
            <!--  -->
            <div class="flex form-item">
              <div class="flex flex-s">
                <label for="unread">状态</label>
              </div>

              <div class="input flex-1 text-right">
                <span class="mr-4">已读</span>
                <input id="unread" v-model="form.unread" type="checkbox" />
              </div>
            </div>
            <!--  -->
            <div class="flex form-item">
              <div class="flex flex-s">
                <label for="unread">通知开关</label>
              </div>

              <div class="input flex-1 text-right">
                <span class="mr-4">已打开</span>
                <input id="unread" v-model="form.disturb" type="checkbox" />
              </div>
            </div>
            <!--  -->
            <div class="flex form-item">
              <div class="flex flex-s">
                <label for="unread">置顶</label>
              </div>

              <div class="input flex-1 text-right">
                <span class="mr-4">已置顶</span>
                <input id="unread" v-model="form.topping" type="checkbox" />
              </div>
            </div>
          </div>

          <!--  -->
          <div class="text-center mt-32">
            <div class="comfirm">
              <button type="submit">确定</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import backPng from '@/assets/images/back.png';
  import { nanoid } from 'nanoid';
  import { getMessageStore } from '@/store/message/utils';
  import { avatarApi } from '@/api/common';
  import { showLoading } from '@/views/components/loading/loading';
  import { feedback } from '@/views/components/feedback/feedback';
  import arrowRight from '@/assets/images/arrow-right.png';
  import Toolbar from '@/views/container/Toolbar.vue';
  import { IMessagePreview } from '../chat/types';
  import { gobackSetting, showSetting, typeList } from './setting';

  const formRef = ref();

  const random = ref(true);

  const formObject: IMessagePreview = {
    title: '',
    avatar: '',
    time: '',
    unread: false,
    lastMessage: '',
    sort: 0,
    type: 'sole',
    disturb: false,
    topping: false,
    id: nanoid(),
    show: true,
    messageList: [],
  };
  const form = ref<IMessagePreview>({
    ...formObject,
  });

  const submit = () => {
    const e = window.event as FormDataEvent;
    e.preventDefault();
    const formEl = formRef.value as HTMLFormElement;
    if (formEl.checkValidity()) {
      const store = getMessageStore();
      form.value.avatar = `${avatarApi}?r=${form.value.id.slice(0, 6)}`;
      form.value.sort = store.list.length;
      store.list.push(form.value);
      form.value = { ...formObject };

      const callback = () => {
        feedback({
          show: true,
          callback: gobackSetting,
          tips: '保存成功',
        });
      };
      showLoading(
        {
          show: true,
          type: 'loading',
        },
        callback
      );
    }
  };
</script>

<style lang="scss" scoped>
  @import './style';
</style>
